<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D变换</title>
    <style>
        .spec{
            perspective:500px;
        }
        @keyframes an1{
            0%{
                transform:scale3d(1,1,1) rotateY(0deg) rotateX(0deg);
            }
            100%{
                transform:scale3d(1,1,1) rotateY(360deg) rotateX(360deg);
            }
        }
        #wrapper{
            width:200px;
            height:200px;
            border:solid 1px #000;
            margin:100px auto;
            position:relative;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
            -o-transform-style:preserve-3d;
            transform-style:preserve-3d;
            animation:an1 10s infinite;
            /*transform:rotateX(10deg);*/
        }
        #wrapper div{
            text-align:center;
            line-height:200px;
            font-family: Arial;
            font-size:62px;
        }
        #wrapper div:nth-of-type(1){
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(241, 101, 220, 0.52);
            transform:translateZ(-100px);
        }
        #wrapper div:nth-of-type(2){
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(238, 7, 7, 0.59);
            transform:rotateY(90deg) translateZ(100px);
        }
        #wrapper div:nth-of-type(3){
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(7, 238, 79, 0.59);
            transform:rotateY(90deg) translateZ(-100px);
        }
        #wrapper div:nth-of-type(4){
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(7, 30, 238, 0.53);
            transform:rotateX(90deg) translateZ(-100px);
        }
        #wrapper div:nth-of-type(5){
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(234, 238, 7, 0.53);
            transform:rotateX(90deg) translateZ(100px);
        }
        #wrapper div:nth-of-type(6){
            position:absolute;
            width:100%;
            height:100%;
            background:rgba(7, 155, 238, 0.4);
            transform:translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="spec">
        <div id="wrapper">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>
</html>
